// 导航
const projectNavSpan = document.getElementById("nav-span");
// 左侧分类
const projectTabItems = document.querySelectorAll(".tab-item");
// 右侧列表
const projectList = document.querySelectorAll(".project-list");
const projectContainer = document.querySelector(".project-container");

let urlParams = new URLSearchParams(window.location.search);
let position = urlParams.get("position");
if (position) {
  position = decodeURIComponent(position);
  position = position.replace(/"/g, "");
  projectTabItems.forEach(function (tab, index) {
    if (index == position) {
      tab.classList.add("active");
      projectNavSpan.innerText = `> ${tab.innerText}`;
    } else {
      tab.classList.remove("active");
    }
  });
  projectList.forEach(function (list) {
    list.classList.remove("show");
  });
  const showListId = `project-list-${position}`;
  document.getElementById(showListId).classList.add("show");
  projectContainer.scrollIntoView({
    behavior: "smooth",
    block: "start"
  })
}

projectTabItems.forEach(function (tab, index) {
  tab.addEventListener("click", function (e) {
    projectTabItems.forEach(function (i) {
      i.classList.remove("active");
    });

    projectList.forEach(function (list) {
      list.classList.remove("show");
    });

    const showListId = `project-list-${index}`;
    document.getElementById(showListId).classList.add("show");
    this.classList.add("active");
    projectNavSpan.innerText = `> ${e.target.innerText}`;
  });
});
